<template>
  <div>
    <div class="search" style="margin-bottom: 10px">品牌：
      <el-select size="small" v-model="params.brandPartyId" filterable @change="changeBrand">
        <el-option v-for="item in brandList" :value="item.id" :label="item.brandPartyName"
                   :key="item.id"></el-option>
      </el-select>
    </div>
    <el-table :data="payData" height="calc(100vh - 220px)"
              border stripe :cell-style="{ 'textAlign': 'center' }"
              :header-cell-style="{  'fontSize': '14px', 'background-color': '#F3F6FD', 'color': '#333333', 'textAlign': 'center' }">
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column label="任务名称" prop="assignName"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
      <el-table-column label="付款编号" prop="outOrderNo"></el-table-column>
      <el-table-column label="付款金额" prop="payAmount"></el-table-column>
      <el-table-column label="付款人" prop="userName"></el-table-column>
      <el-table-column label="付款时间" prop="payTime"></el-table-column>
      <el-table-column label="付款方式" prop="payMethod"></el-table-column>
      <el-table-column label="明细" width="300px">
        <template v-slot:default="scope">
          <div v-if="scope.row.isSeparate==2">
            <p style="color:#ff6a00;">收单方分账金额-耀一:{{ scope.row.acquiringSeparateMoney }}</p>
            <p style="color: #6788FF">装修公司分账金额:{{ scope.row.companySeparateMoney }}</p>
            <p style="color: #303e9d">拉卡拉手续费:{{ scope.row.channelFee }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否分账">
        <template v-slot:default="scope">
          <span v-if="scope.row.isSeparate==0" style="color: #303e9d">否</span>
          <span v-if="scope.row.isSeparate==1" style="color: #303e9d">需要分账</span>
          <span v-if="scope.row.isSeparate==2" style="color: #303e9d">已分账</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot:default="scope">
          <el-link v-if="scope.row.isSeparate==1" style="color: #303e9d;text-decoration:underline"
                   @click="separatePay(scope.row)">分账
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="padding: 20px 0;" align="center" @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 40, 50]"
                   layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
    </el-pagination>
  </div>
</template>

<script>

export default {
  meta: {title: "支付列表", icon: "el-icon-s-claim", authorityList: 1100, sort: 10},
  name: "payList",
  data() {
    return {
      payData: [],
      currentPage: 1,
      pageSize: 20,
      totalCount: 0,
      brandList: [],
      params: {
        pageNumber: 1,
        pageSize: 20,
        brandPartyId: "",
      }
    }
  },
  created() {
    this.getBrand()
  },
  methods: {
    getBrand() {
      this.$api.storeGetBrandPartyList().then(res => {
        this.brandList = res
        this.params.brandPartyId = res[0].id
        this.getData()
      })
    },
    getData() {
      this.$api.contractGetAllContractsPayVo(this.params).then(res => {
        this.payData = res.data
        this.totalCount = res.total
      })
    },
    separatePay(e) {
      this.$api.contractStartSeparate({orderNo: e.orderNo}).then(res => {
        if (res && typeof res == 'object') {
          this.$message.success('分账成功！')
          this.getData()
        } else {
          console.log(res)
        }
      });
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getData()
    },
    changeBrand(val){
      this.params.brandPartyId=val
      this.getData()
    }
  }
}
</script>

<style scoped>
@import "../../assets/css/public.css";
</style>